<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SQL Editor with Parameter Parsing</title>
    <style>
        #editor {
            width: 800px;
            height: 400px;
        }
        #parameter-list {
            margin-top: 20px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' } });
        require(['vs/editor/editor.main'], function () {
            // 模拟数据库表结构
            const tableSchema = {
                'users': {
                    'user_id': 'INT',
                    'username': 'VARCHAR',
                    'email': 'VARCHAR'
                }
            };

            const editor = monaco.editor.create(document.getElementById('editor'), {
                value: 'SELECT * FROM users WHERE user_id = :user_id',
                language: 'sql'
            });

            function parseSQL() {
                const sql = editor.getValue();
                const paramRegex = /:(\w+)/g;
                const params = [];
                let match;
                while ((match = paramRegex.exec(sql))!== null) {
                    const paramName = match[1];
                    let paramType = 'UNKNOWN';
                    // 尝试从模拟表结构中推断参数类型
                    for (const table in tableSchema) {
                        if (tableSchema[table].hasOwnProperty(paramName)) {
                            paramType = tableSchema[table][paramName];
                            break;
                        }
                    }
                    params.push({
                        name: paramName,
                        type: paramType,
                        manualType: null
                    });
                }

                // 模拟数据库连接校验
                try {
                    // 这里只是简单模拟，实际中需要完整的语法检查
                    if (!sql.includes('SELECT') &&!sql.includes('FROM')) {
                        throw new Error('Invalid SQL syntax');
                    }
                    // 检查表是否存在于模拟表结构中
                    const tableRegex = /FROM (\w+)/;
                    const tableMatch = sql.match(tableRegex);
                    if (tableMatch) {
                        const tableName = tableMatch[1];
                        if (!tableSchema.hasOwnProperty(tableName)) {
                            throw new Error(`Table ${tableName} does not exist`);
                        }
                    }
                    console.log('SQL syntax and table permissions are valid');
                } catch (error) {
                    console.error('SQL validation failed:', error.message);
                }

                // 显示参数列表
                const paramList = document.getElementById('parameter-list');
                paramList.innerHTML = '';
                params.forEach((param, index) => {
                    const row = document.createElement('div');
                    row.innerHTML = `
                        <span>Parameter: ${param.name}</span>
                        <span>Auto Type: ${param.type}</span>
                        <input type="text" placeholder="Manual Type" onchange="updateManualType(${index}, this.value)">
                    `;
                    paramList.appendChild(row);
                });
            }

            function updateManualType(index, manualType) {
                const paramList = document.getElementById('parameter-list');
                const rows = paramList.children;
                const paramRow = rows[index];
                const autoTypeSpan = paramRow.querySelector('span:nth-child(2)');
                autoTypeSpan.textContent = `Auto Type: ${manualType}`;
            }

            const parseButton = document.createElement('button');
            parseButton.textContent = 'Parse SQL';
            parseButton.addEventListener('click', parseSQL);
            document.body.appendChild(parseButton);
        });
    </script>
</head>

<body>
    <div id="editor"></div>
    <div id="parameter-list"></div>
</body>

</html>